<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <link rel="stylesheet" href="/static/component/weui.min.css"/>
    <link rel="stylesheet" href="/static/component/bootstrap4.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/component/loginH5.css"/>
</head>

<body>
<div class="container-fluid">
    <input type="hidden" th:value="${weXinSign?.appId}" id="appId"/>
    <input type="hidden" th:value="${weXinSign?.url}" id="url"/>
    <input type="hidden" th:value="${weXinSign?.nonceStr}" id="nonceStr"/>
    <input type="hidden" th:value="${weXinSign?.timestamp}" id="timestamp"/>
    <input type="hidden" th:value="${weXinSign?.signature}" id="signature"/>
    <div class="row ai-setting-title">
        <div class="col-sm">
            <h4>全国首创AI人工智能识别坐姿</h4>
            <h4>21天坐姿习惯养成</h4>
        </div>
    </div>

    <div id="ai-setting-success-div" class="row" style="display: none;margin-top: -6.2em;">
        <div class="col-sm">
            <img class="ai-setting-success-bg"/>
            <div class="ai-setting-txt-success">
                恭喜您注册成功
            </div>
            <button type="button" class="btn-block btn ai-setting-btn-ljsy lksybtn">立即使用慧眸坐姿</button>
        </div>
    </div>

    <div id="ai-setting-regist-div" class="row">
        <form style="margin:0 auto;">
            <div class="ai-setting-form">
                <div th:if="${user}" class="ai-setting-inviting">
                    <input type="hidden" th:value="${recommendCode}" id="recommendCode"/>
                    <span><span th:text="${user?.account}"></span> 邀请您使用慧眸坐姿</span>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="ai-setting-form-phone"></div>
                    </div>
                    <input id="mobile" type="text" class="form-control" placeholder="请输入手机号"/>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="ai-setting-form-code"></div>
                    </div>
                    <input id="code" type="text" class="form-control" placeholder="请输入验证码"/>
                    <div class="input-group-append">
                        <span class="input-group-text"
                              style="width: 100px;text-align: center;display: block;line-height: 32px;" id="getCodeBtn">获取验证码</span>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="ai-setting-form-password"></div>
                    </div>
                    <input id="password" type="text" class="form-control" placeholder="请输入密码"/>
                </div>
                <button id="registerBtn" type="button" class="btn-block btn btn-primary ai-setting-regist-button">立即注册
                </button>
                <button type="button" class="btn btn-block btn-link ai-setting-regist-open lksybtn">如您已经注册：点击立即打开</button>
            </div>
        </form>
    </div>
    <div class="row" style="">
        <div class="col-sm ai-setting-tjyl">
            <p style="font-weight: bolder;">
                推荐有礼：
            </p>
            <p style="text-indent: 1.5em;">
                邀请朋友A注册并使用，您可获得8元，朋友A再邀请朋友B，您可再获得5元，朋友B再邀请朋友C，您可再获得2元。
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm ai-setting-desc">
            <p>
                一款实时监控辅助帮助孩子矫正坐姿的人工智能软件，有效解决青少年驼背近视等问题。能够自动提醒孩子矫正坐姿，并且支持家长实时查看。
            </p>
            <p>
                防近视，正坐姿，防驼背。
            </p>
        </div>
    </div>
    <div class="row" style="margin-top: 36px;">
        <div class="col-sm">
            <div class="ai-setting-jszl-title-wrapper">
                <div class="ai-setting-jszl-title">
                </div>
                <div class="ai-setting-jszl-title-text">技术专利</div>
            </div>
        </div>
    </div>
    <div class="">
        <div class="row" style="margin-top: 36px;">
            <div class="col-sm lg-div" style="text-align: center;">
                <img class="ai-setting-pic-1" data-src="/static/component/images/certificate_one.jpeg"/>
                <img class="ai-setting-pic-2" data-src="/static/component/images/certificate_two.jpeg"/>
            </div>
        </div>
        <div class="row" style="margin-top: 6px;">
            <div class="col-sm lg-div" style="text-align: center;">
                <img class="ai-setting-pic-3" data-src="/static/component/images/certificate_three.jpeg"/>
                <img class="ai-setting-pic-4" data-src="/static/component/images/certificate_four.jpeg"/>
                <img class="ai-setting-pic-5" data-src="/static/component/images/certificate_five.jpeg"/>
            </div>
        </div>
    </div>
</div>

</body>
<script src="/static/component/jquery-3.4.1.min.js"></script>
<script src="/static/component/bootstrap4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="/static/component/weui.min.js"></script>
<script src="/static/component/md5.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
<script src="/static/component/loginH5.js"></script>

</html>